<template>
	<view style="height: 100vh;" :class="nightStatus?'nightTheme':''">
		<page-title :Theme="nightStatus?'nightTheme':''">音乐详情</page-title>
		<!-- 歌曲信息 -->
		<view class="d-inline-block w-100 text-center py-2">
			<view>
				<text class="font">歌曲:</text>
				<text class="font-weight-bold">{{audioName}}</text>
			</view>
			<view>
				<text class="font">歌手:</text>
				<text class="font-weight-bold">{{singerName}}</text>
			</view>
		</view>
		<!-- 歌曲图片 -->
		<view class="flex align-center justify-center">
			<image :src="CurCover" lazy-load mode="aspectFill"
				style="border-radius: 35rpx;box-shadow: 0 2rpx 6rpx 0;width: 600rpx;height: 379rpx;"></image>
		</view>
		<!-- 进度部分 -->
		<view class="flex align-center justify-center font" style="color: #7a8388; padding-top: 10rpx;">
			<!-- 歌曲总时长 -->
			<view>{{durationTime|formatTime}}</view>
			<!-- 进度条 -->
			<view style="width: 500rpx;">
				<slider block-size="16" activeColor="#e48267" backgroundColor="#eef2f3" :max="durationTime"
					:value="currentTime" @change="sliderToPlay" @changing="sliderToPlay" />
			</view>
			<!-- 播放的当前时间 -->
			<view>{{currentTime|formatTime}}</view>
		</view>
		<!-- 按钮部分 -->
		<view>
			<view class="flex align-center justify-center" style="padding:50rpx 0 50rpx 0;">
				<view class="mr-3" @tap="PreOrNext('pre')">
					<myIcon iconId="icon-shangyixiang" iconSize="85"></myIcon>
				</view>
				<view class="mx-5" @tap="PlayOrPause">
					<myIcon :iconId="playStatus?'icon-zanting':'icon-bofang1'" iconSize="80"></myIcon>
				</view>
				<view class="ml-2" @tap="PreOrNext('next')">
					<myIcon iconId="icon-xiayixiang" iconSize="85"></myIcon>
				</view>
			</view>
			<view class="flex align-center justify-center font">
				<view class="flex flex-column align-center" @tap="chageListStatus('listStatus')">
					<myIcon :iconId="listStatus?'icon-liebiao':'icon-icon--'" iconSize="60"></myIcon>
					<text>播放列表</text>
				</view>
				<view class="flex flex-column align-center" style="padding: 0 80rpx;"
					@tap="chageListStatus('collectStatus')">
					<myIcon :iconId="collectStatus?'icon-xihuan2':'icon-aixinfengxian'" iconSize="60"></myIcon>
					<text>收藏</text>
				</view>
				<view class="flex flex-column align-center" @tap="chageListStatus('nightStatus')">
					<myIcon :iconId="nightStatus?'icon-yueliang':'icon-yejianmoshi'" iconSize="60"></myIcon>
					<text>夜间模式</text>
				</view>
			</view>
		</view>
		<!-- 歌曲详情 -->
		<view class="fixed-bottom shadow p-2 animated fadeInUp" style="height: 220rpx;border-radius: 30rpx;z-index: 0;"
			v-show="!listStatus">
			<view class="flex justify-between">
				<view>
					<view>
						<text class="font">歌曲:</text>
						<text class="font-weight-bold">{{audioName}}</text>
					</view>
					<view>
						<text class="font">歌手:</text>
						<text class="font-weight-bold">{{singerName}}</text>
					</view>
				</view>
				<view @tap="showSingerSynopsis">
					<myIcon iconId="icon-jieshao" iconSize="65"></myIcon>
				</view>
			</view>
			<view>
				<view class="font-md pt-2">歌手简介:</view>
				<view class="text-ellipsis w-100">{{singerSynopsis}}</view>
			</view>
		</view>
		<!-- 播放列表部分 -->
		<view class="fixed-bottom shadow p-2 animated fadeInUp" style="height: 260rpx;border-radius: 30rpx;"
			v-show="listStatus">
			<view class="font-weight-bold font-md" style="height: 50rpx;">列表选择</view>
			<scroll-view scroll-y style="height: 400rpx;">
				<block v-for="(item, index) in audioList" :key="item.id">
					<view class="flex align-center font px-2" style="height: 85rpx;" hover-class="bg-light"
						@tap="selectPlay(item.id)">
						<text class="flex-1 text-ellipsis">{{item.audioName}}</text>
						<text class="flex-1 text-ellipsis">{{item.singerName}}</text>
						<view class="flex-1 ml-3 flex align-center">
							<template v-if="item.playStatus">
								<text class="mr-2">{{item.playStatus===1?'播放中':'播放'}}</text>
								<myIcon :iconId="item.playStatus===1?'icon-bofangzhong2':'icon-bofangsanjiaoxing'"
									iconSize="40"></myIcon>
							</template>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<!-- 歌手简介详情 -->
		<uni-popup ref="popup">
			<view class="px-2 shadow" style="width: 600rpx;height: 850rpx;border-radius: 40rpx;"
				:class="nightStatus?'nightTheme':'bg-white'">
				<text class="font">{{singerSynopsis}}</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import pageTitle from '@/components/pageTitle.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import unit from '@/common/unit.js'
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				listStatus: false, // 播放列表状态管理
				collectStatus: false, // 收藏状态管理
				nightStatus: false // 夜间模式状态管理
			}
		},
		filters: {
			formatTime(num) {
				return num === 100 ? unit.formatTime(0) : unit.formatTime(num)
			}
		},
		components: {
			pageTitle,
			uniPopup
		},
		computed: {
			...mapState({
				playStatus: ({
					audio
				}) => audio.playStatus,
				durationTime: ({
					audio
				}) => audio.durationTime,
				currentTime: ({
					audio
				}) => audio.currentTime,
				audioList: ({
					audio
				}) => audio.audioList
			}),
			...mapGetters([
				'audioName',
				'singerName',
				'singerSynopsis',
				'CurCover'
			])
		},
		methods: {
			...mapActions([
				'PlayOrPause',
				'PreOrNext',
				'sliderToPlay',
				'selectPlay',
				'init'
			]),
			// 改变状态
			chageListStatus(statusType) {
				this[statusType] = !this[statusType]
			},
			// 展示歌手简介详情
			showSingerSynopsis() {
				this.$refs.popup.open()
			}
		},
		onLoad() {
			this.init()
		}
	}
</script>

<style>

</style>
